<template>
	<view class="container bg" style="height: 100%;">
		<view class="t">智慧校园</view>
		<view class="t1">体测成绩报告，随时掌握</view>
		<view class="type">家长端</view>
		<image class="img" src="/static/img/student-head-right.png"></image>
		<swiper class="swiper" next-margin="20" :indicator-dots="false" :autoplay="false" :interval="5000"
			:duration="1000">
			<swiper-item class="swiper-item" v-for="item in 5">
				<view class="swiper-item-cover">
					<view class="swiper-item-cover-name">小夜曲</view>
					<image class="swiper-item-cover-sex" src="/static/img/ic-sex-0.png"></image>
					<view class="swiper-item-cover-school">哈尔滨学校名称</view>
					<view class="swiper-item-cover-class">三年二班</view>
					<view class="swiper-item-cover-number">231089199904221234</view>
					<image class="swiper-item-cover-head" src="/static/img/head.png"></image>
					<view class="swiper-item-cover-menu">
						<view class="swiper-item-cover-menu-cell" @click="goHistory">
							<image src="/static/img/student-history.png" />
							<view>历史成绩</view>
						</view>
						<view class="swiper-item-cover-menu-cell" @click="goMsg">
							<image src="/static/img/student-msg.png" />
							<view>消息通知</view>
						</view>
						<view class="swiper-item-cover-menu-cell" @click="goMine">
							<image src="/static/img/student-user.png" />
							<view>个人中心</view>
						</view>
					</view>
				</view>
			</swiper-item>


		</swiper>
		<view class="record">
			<view class="record-cover">
				<view class="record-title">
					<image src="/static/img/achievement-sprit.png">
						<view class="record-title-name">2025年第一次体测</view>
						<view class="record-title-date">2025-11-04</view>
				</view>
				<view class="list">
					<view class="list-item" v-for="item in list">
						<template v-if="item.type ==1">
							<view class="list-item-project">跳远</view>
							<view class="list-item-detail" @click="goDetail">去查看</view>
							<image class="list-item-arrow" @click="goDetail" src="/static/img/arrow-right.png" />
							<view><app-scale-bar :value="value"></app-scale-bar></view>
							<view class="list-item-score">
								<view class="list-item-score-name">当前分数：</view>
								<view class="list-item-score-value">80</view>
								<view class="list-item-score-level">优秀</view>
							</view>
						</template>
						<template v-else>
							<view class="list-item-lock">
								<view class="list-item-lock-project">跳远</view>
								<image class="list-item-lock-ic" src="/static/img/lock.png" />
								<view class="list-item-lock-text"> 观看15s视频即可解锁</view>
								<image class="list-item-lock-arrow" src="/static/img/arrow-right.png" />
							</view>
						</template>
					</view>
				</view>
			</view>
			<image class="record-label" src="/static/img/achievement-text.png"></image>
		</view>
	</view>
</template>
<script>
	import AppScaleBar from '@/components/app-scale-bar/index.vue'
	export default {
		components: {
			AppScaleBar
		},
		data() {
			return {
				value: 90,
				list: [{
						type: 1,
					}, {
						type: 1
					}, {
						type: 2
					}, {
						type: 2
					},
					{
						type: 2
					}, {
						type: 2
					},
				]
			}
		},

		methods: {
			//学生详情
			goDetail() {
				uni.navigateTo({
					url: '/pages/student/detail'
				})
			},
			//历史成绩
			goHistory() {
				uni.navigateTo({
					url: '/pages/student/history'
				})
			},
			//个人中心
			goMine() {
				uni.navigateTo({
					url: '/pages/mine/index'
				})
			},
			//消息通知
			goMsg() {
				uni.navigateTo({
					url: '/pages/msg/index'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.record {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		position: relative;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;

			// overflow-y: auto;

			&-item {
				width: 628rpx;
				border-radius: 20rpx;
				background: #F1FFFC;
				box-sizing: border-box;
				padding: 20rpx;
				margin-bottom: 20rpx;
				position: relative;

				&-lock {
					display: flex;
					align-items: center;

					&-project {
						font-size: 32rpx;
						font-weight: bold;
						color: $uni-color-title;
					}

					&-ic {
						margin-left: 10rpx;
						width: 32rpx;
						height: 32rpx;
					}

					&-text {
						position: absolute;
						right: 40rpx;
						top: 22rpx;
						color: #666;
						font-size: 28rpx;
					}

					&-arrow {
						position: absolute;
						right: 10rpx;
						top: 28rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}

				&-score {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					&-name {
						font-size: 32rpx;
						color: #1A1A1A;
					}

					&-value {
						color: #1A1A1A;
						font-size: 48rpx;
						font-weight: bold;
					}

					&-level {
						margin-left: 20rpx;
						height: 36rpx;
						border-radius: 12rpx;
						@include center();
						padding: 6rpx 12rpx;
						background: linear-gradient(90deg, #38CDB0 0%, #59E8B5 100%);
						color: #fff;
						font-size: 24rpx;
					}
				}

				&-project {
					font-size: 32rpx;
					font-weight: bold;
					color: $uni-color-title;
				}

				&-detail {
					position: absolute;
					right: 50rpx;
					top: 16rpx;
					color: #666;
					font-size: 26rpx;
				}

				&-arrow {
					position: absolute;
					right: 10rpx;
					top: 20rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		&-title {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 24rpx;
			position: relative;


			image {
				width: 16.58rpx;
				height: 24rpx;
			}

			&-name {
				margin-left: 10rpx;
				width: fit-content;
				color: #1A1A1A;
				font-size: 36rpx;
				width: 460rpx;
				overflow: hidden;
				font-weight: bold;

			}

			&-date {
				font-size: 28rpx;
				color: #666666;
				position: absolute;
				right: 60rpx;

			}
		}

		&-label {
			position: absolute;
			left: 18rpx;
			width: 189.84rpx;
			height: 66rpx;
		}

		&-cover {
			width: 676rpx;
			border-radius: 28rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 20rpx 0px rgba(19, 88, 76, 0.1);
		}
	}

	.swiper {
		margin-top: 38rpx;
		height: 360rpx;

		&-item {
			display: flex;
			justify-content: center;

			&-cover {
				position: relative;
				padding: 28rpx;
				box-sizing: border-box;
				width: 676rpx;
				height: 360rpx;
				border-radius: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(19, 88, 76, 0.1);

				&-menu {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-around;

					&-cell {
						cursor: pointer;
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 72rpx;
							height: 72rpx;
						}

						view {
							margin-top: 16rpx;
							font-size: 32rpx;
							color: #9E9E9E;
						}

						&:active {
							opacity: 0.7;
						}
					}
				}

				&-head {
					position: absolute;
					right: 30rpx;
					top: 20rpx;
					border-radius: 50%;
					width: 100rpx;
					height: 100rpx;
				}

				&-number {
					position: absolute;
					top: 126rpx;
					right: 20rpx;
					height: 52rpx;
					width: fit-content;
					margin-top: 18rpx;
					border-radius: 64rpx;
					background: #E7FCF8;
					box-sizing: border-box;
					padding: 12rpx 16rpx;
					@include center();
					color: #666;
					font-size: 28rpx;
				}

				&-class {
					height: 52rpx;
					width: fit-content;
					margin-top: 18rpx;
					border-radius: 64rpx;
					background: #E7FCF8;
					box-sizing: border-box;
					padding: 12rpx 16rpx;
					@include center();
					color: #666;
					font-size: 28rpx;
				}

				&-school {
					margin-top: 18rpx;
					color: #666;
					font-size: 28rpx;
				}

				&-sex {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 36rpx;
					left: 160rpx;
					left: 200rpx;
				}

				&.selected {
					border: 2px solid #14AD61;
				}

				&-name {
					color: #1A1A1A;
					font-size: 36rpx;
				}
			}
		}

	}

	.t {
		margin-left: 38rpx;
		font-weight: bold;
		margin-top: 196rpx;
		font-size: 52rpx;
		color: $uni-color-title;
	}

	.t1 {
		margin-left: 38rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		color: $uni-color-title;
	}

	.img {
		position: absolute;
		top: 196rpx;
		right: 38rpx;
		width: 264rpx;
		height: 264rpx;
	}

	.type {
		@include center();
		width: fit-content;
		border-radius: 44rpx;
		padding: 8rpx 28rpx;
		background: rgba(255, 255, 255, 0.4);
		box-sizing: border-box;
		border: 0.8rpx solid #FFFFFF;
		backdrop-filter: blur(4rpx);
		margin-left: 38rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666;
	}
</style>